<template>
  <div>
    <Card>
      <Button style="margin: 10px 0;float: right" type="primary" @click="toAdd">发布文章</Button>
      <tables ref="tables" searchable search-place="top" v-model="page.content" :columns="columns" @on-update="toUpdate"/>
      <Page :total="page.totalElements" :current="page.number"  show-sizer style="margin: 10px 0;float: right" @on-change="changePage" @on-page-size-change="changePageSize"/>
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为Csv文件</Button>
    </Card>
  </div>
</template>

<script>
import Tables from '_c/tables'
import { getBlogList } from '@/api/blog/list'
export default {
  name: 'tables_page',
  components: {
    Tables
  },
  data () {
    return {
      columns: [
        {title: '标题', key: 'blogTitle', sortable: true},
        {title: '作者', key: 'blogAuthor', editable: true},
        {title: '类别', key: 'typeName', editable: true},
        {title: '发表时间', key: 'createDate', editable: true},
        {
          title: 'Handle',
          key: 'handle',
          button: [
            (h, params, vm) => {
              return h('span', {
                on: {
                  click: () => {
                    vm.$emit('on-update', params)
                  }
                }
              }, [
                h('Button', '修改')
              ])
            },
            (h, params, vm) => {
              return h('Poptip', {
                props: {
                  confirm: true,
                  title: '你确定要删除吗?'
                },
                on: {
                  'on-ok': () => {
                    vm.$emit('on-delete', params)
                    vm.$emit('input', params.page.list.filter((item, index) => index !== params.row.initRowIndex))
                  }
                }
              }, [
                h('Button', '删除')
              ])
            }
          ]
        }
      ],
      page: {
        number: 1,
        size: 10,
        totalElements: 0,
        totalPages: 0,
        content: []
      }
    }
  },
  methods: {
    changePage (index) {
      this.page.pageNum = index
      this.toGetBlogList()
    },
    toUpdate (params) {
      this.$router.push({
        name: 'blog_update',
        params: {
          blogId: params.row.blogId
        }
      })
    },
    changePageSize (index) {
      this.page.pageSize = index
      this.toGetBlogList()
    },
    handleDelete (params) {
      console.log(params)
    },
    toAdd () {
      this.$router.push({name: 'blog_add'})
    },
    exportExcel () {
      this.$refs.tables.exportCsv({
        filename: `table-${(new Date()).valueOf()}.csv`
      })
    },
    toGetBlogList () {
      getBlogList(this.page).then(res => {
        this.page = res.page
        this.page.number += 1
      })
    }
  },
  mounted () {
    this.toGetBlogList()
  }
}
</script>

<style>

</style>
